<!-- 友链编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改榜单' : '添加榜单'"
    :visible="visible"
    width="860px"
    :destroy-on-close="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :before-close="confirmClose"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="名称:" prop="name">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.name"
          placeholder="请输入名称"
        />
      </el-form-item>
      <!--      <el-form-item label="icon:" prop="icon">-->
      <!--        <uploadImage :limit="1" v-model="form.icon"></uploadImage>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="选中icon:" prop="select_icon">-->
      <!--        <uploadImage :limit="1" v-model="form.select_icon"></uploadImage>-->
      <!--      </el-form-item>-->
      <el-form-item label="排序:" prop="sort">
        <el-input
          clearable
          :maxlength="20"
          type="number"
          v-model="form.sort"
          placeholder="请输入排序"
        />
      </el-form-item>
      <el-form-item label="投放平台:" prop="device">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedDevice"
          @change="handleCheckedDeviceChange"
          border
        >
          <el-checkbox
            v-for="item in arrDevice"
            :label="item.value"
            :key="item.value"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!--      <el-form-item label="展示场景:" prop="scene">-->
      <!--        <el-select-->
      <!--          v-model="form.scene"-->
      <!--          placeholder="请选择展示场景"-->
      <!--          width="100%"-->
      <!--        >-->
      <!--          <el-option label="三端互通" :value="1" />-->
      <!--          <el-option label="纯PC展示" :value="2" />-->
      <!--          <el-option label="热搜管理" :value="3" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="上架状态:" prop="status">
        <el-radio-group v-model="form.status" size="medium">
          <el-radio :label="1" border>上架</el-radio>
          <el-radio :label="2" border>下架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="confirmClose()">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// import uploadImage from "@/components/uploadImage";
export default {
  name: "BoxGameRankingEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  // components: { uploadImage },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        status: [
          { required: true, message: "请选择上架状态!", trigger: "blur" },
        ],
        // scene: [
        //   { required: true, message: "请选择展示场景!", trigger: "blur" },
        // ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      checkAll: false,
      isIndeterminate: true,
      checkedDevice: [],
      arrDevice: [
        {
          label: "安卓",
          value: 2,
        },
        {
          label: "IOS",
          value: 3,
        },
        {
          label: "PAD",
          value: 4,
        },
        {
          label: "IPAD",
          value: 5,
        },
        {
          label: "PC",
          value: 6,
        },
      ],
    };
  },

  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
        if (this.form.device) {
          if (this.form.device.includes("1")) {
            this.handleCheckAllChange(true);
            this.checkAll = true;
          } else {
            this.form.device = this.form.device.split(",");
            this.checkedDevice = this.form.device.map(Number);
            this.checkAll = false;
          }
        }
      } else {
        this.form = {};
        this.checkedDevice = [];
        this.isUpdate = false;
      }
    },
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (Array.isArray(this.form.device)) {
            this.form.device = this.form.device.join(",");
          }
          this.$http
            .post("/rank.BoxGameRanking/edit", this.form)
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(
                  res.data.msg ? res.data.msg : "操作成功!"
                );
                this.form = {};
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg ? res.data.msg : "操作失败!");
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          if (!this.isUpdate) {
            this.form = {};
          }
        })
        .catch(() => {});
    },

    handleCheckAllChange(val) {
      this.checkedDevice = val ? [2, 3, 4, 5, 6] : [];
      this.isIndeterminate = false;
      if (val) {
        this.form.device = 1;
      } else {
        this.form.device = "";
      }
    },

    handleCheckedDeviceChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.arrDevice.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.arrDevice.length;
      if (this.checkAll) {
        this.form.device = 1;
      } else {
        this.form.device = value.join(",");
      }
    },
  },
};
</script>

<style scoped></style>
